<template>
	<view class="i-information-item e-m-b-40" :class="[!top && 'e-flex']">
		<view :class="[top ? 'e-m-b-20' : 'e-flex-1']">
			<view class="e-line-2" :class="[!top && 'e-p-r-30 e-line-h-42 e-m-b-20']" :style="[!top && `height:80rpx`]" v-if="option.itemTitleShow">
				<text class="e-font-30 w-500" :style="[{ color: option.itemTitleColor }]">{{ info.title }}</text>
			</view>
			<view v-if="!top">
				<text class="e-font-24  e-p-r-16" :style="[{ color: option.sourceColor }]" v-if="option.sourceShow">{{ info.authorName }}</text>
				<text class="e-font-24 " :style="[{ color: option.readingColor }]" v-if="option.readingShow">{{ info.views || 0 }}{{$t('layout.阅读')}}</text>
			</view>
			
		</view>
		<view class="e-flex" :class="[top && 'e-m-b-20']">
			<image mode="widthFix" :src="$fullLink(imgs[0])" :style="imgStyle" :class="`i-information-item__img${top ? 0 : 1}`" />
			<image
			mode="widthFix"
				:src="$fullLink(imgs[1])" 
				:style="imgStyle"
				class="e-m-l-10"
				:class="`i-information-item__img${top ? 0 : 1}`"
				v-if="top"
			/>
		</view>
		<view v-if="top">
			<text class="e-font-24  e-p-r-16" :style="[{ color: option.sourceColor }]" v-if="option.sourceShow">{{ info.authorName }}</text>
			<text class="e-font-24 " :style="[{ color: option.readingColor }]" v-if="option.readingShow">{{ info.views || 0 }}{{$t('layout.阅读')}}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { InformationItem } from '@/common/request/api';
const props = defineProps<{
	info: InformationItem;
	top: boolean;
	option: {
		itemTitleShow: boolean; //资讯标题是否显示
		itemTitleColor: string; //资讯标题字体颜色
		sourceShow: boolean; //资讯来源是否显示
		sourceColor: string; //资讯来源字体颜色
		readingShow: boolean; //阅读数量是否显示
		readingColor: string; //阅读数量字体颜色
	};
	imgStyle: Record<string, any>;
}>();

const imgs = computed(() => props.info.thumbnailPic?.split?.(',') || []);
</script>

<style lang="scss" scoped>
.i-information-item {
	&__img0 {
		width: calc(50% - 10rpx);
	}
	&__img1 {
		width: 238rpx;
		height: 136rpx;
	}
}
</style>
